import React, { Suspense, lazy } from 'react';


// import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { HashRouter as Router, Route, Switch, Link } from 'react-router-dom';

const OneView = lazy(() => import('@pages/home/OneView'));
const TwoView = lazy(() => import('@pages/home/TwoView'));
const ListView = lazy(() => import('@pages/home/ListView'));
const ListTreeView = lazy(() => import('@pages/home/ListTreeView'));
const ListTreeView2 = lazy(() => import('@pages/home/ListTreeView2'));
const ListTreeView3 = lazy(() => import('@pages/home/ListTreeView3'));

const TopHeader = lazy(() => import('@src/components/TopHeader'));

const AuthRoute = lazy(() => import('./AuthRoute.jsx'));

const EntryPage = lazy(() => import('@pages/home/EntryPage'));

//loginMask 选直接到index.html写一下样式哈

const HomeRouter = () => (
    <Router>
        <Suspense fallback={<div className="loginMask">正在拼命加载...</div>}>
            <TopHeader />
            <Switch>
                <AuthRoute path="/" component={EntryPageRoute} />
            </Switch>
        </Suspense>
    </Router>
);


function EntryPageRoute({ match }) {
    console.log(match, "=======match==========");
    return (
        <EntryPage>
            <Route path={`${match.path}one`} component={OneView} />
            <Route path={`${match.path}two`} component={TwoView} />
            <Route path={`${match.path}list`} component={ListView} />
            <Route path={`${match.path}listTree`} component={ListTreeView} />
            <Route path={`${match.path}listTree2`} component={ListTreeView2} />
            <Route path={`${match.path}listTree3`} component={ListTreeView3} />
        </EntryPage>
    );
}

export default HomeRouter;